<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增心理测试')" />
</head>
<style>
    .input_line{
        border-bottom: 1px solid #000;
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
        outline: none;
    }
</style>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-psychologicaRecord-add" th:object="${examPaper}">
            <input type="hidden" th:name="testId" th:value="*{id}">

            <div class="form-group">    
                <div class="col-sm-12 m-auto text-center">
                    <h3>[[*{name}]]</h3>
                    <p>[[*{gradeName}]] [[*{subject}]] 时间:[[*{duration}]]分钟 </p>
                    <p>姓名: <u>[[${#strings.defaultString(user.userName, '-')}]]</u> 班级: <u></u>  成绩: <u></u> （满分[[*{totalScore}]]分）</p>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-12">
                    <div th:utext="*{description}">
                    </div>
                </div>
            </div>


            <div th:each="question,stat:*{questionList}" class="form-group col-md-offset-4">

                <div class=" m-l m-r-xs" >
                    <strong class="m-b-lg">[[${stat.index+1}]].</strong>

                    <span th:utext="${question['content']}"></span>

                </div>

                <div class="col-sm-10 checkbox m-l m-r-xs" th:each="answer:${question['answerList']}">
                    <!--单选-->
                    <div th:if="${question['type']} eq 1">
                        <div class="radio">
                            <label>
                                <input required type="radio" data-th-item-id = "${question['id']}" class="answerRadio" th:value="${question['score']}"  th:name="'an_' +${question['id']}">
                                <span th:utext="${answer['content']}"></span>
                            </label>
                        </div>
                    </div>
                    <!--多选-->
                    <div th:if="${question['type']} eq 4">
                        <div class="checkbox">
                            <label>
                                <input required type="checkbox" data-th-item-id = "${question['id']}" class="answerRadio" th:value="${question['score']}"  th:name="'an_' +${question['id']}">
                                <span th:utext="${answer['content']}"></span>
                            </label>
                        </div>
                    </div>

                </div>

                <!--简答题-->
                <div th:if="${question['type'] eq 3 || question['type'] eq 5 || question['type'] eq 6} " class="col-sm-10">
                    <textarea style="border:0px;outline:none;" rows="5" class="form-control">

                    </textarea>

                </div>

                <!--论述题-->
                <div th:if="${question['type']} eq 7" class="col-sm-10">
                    <textarea style="border:0px;outline:none;" rows="20" class="form-control">

                    </textarea>

                </div>

            </div>

            <div>
                <input type="hidden" id="score" name="score">
                <input type="hidden" id="answer" name="answer">
                <input type="hidden" name="testUserId" th:value="${(user.userId)}">
                <input type="hidden" name="testUserName" th:value="${(user.userName)}">
            </div>

        </form>

        <div class="row">
            <div class="col-sm-offset-5 col-sm-10">
                <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>提交</button>&nbsp;
            </div>
        </div>

    </div>
    <th:block th:include="include :: footer" />
    <script type="text/javascript">
        var prefix = ctx + "school/psychologicaRecord"
        $("#form-psychologicaTest-add").validate({
            focusCleanup: true
        });

        function submitHandler() {

            if ($.validate.form()) {
                var itemArray = [];
                $("input:radio:checked").each(function(i) {
                    var item = {};
                    var score = $(this).val();

                    var itemId = $(this).attr("item-id");

                    item["itemId"] = itemId;
                    item["score"] = score;
                    itemArray.push(item);

                });
                var data = JSON.stringify(itemArray);
                $("#answer").val(data);
                var res = $('#form-psychologicaRecord-add').serialize();

                $.operate.save(prefix + "/add", $('#form-psychologicaRecord-add').serialize());
            }
        }

        $(document).ready(function() {
            $('input[type=radio]').change(function() {

                var score = 0;

                $("input:radio:checked").each(function(i) {

                    var val = $(this).val();
                    score =parseInt(score)+parseInt(val);

                });

                $("#total_score_p").html(score);
                $("#score").val(score);

            });
        });
    </script>
</body>
</html>